<template>
  <div class="content">
    <h1>订单详情</h1>
    <div class="order-state success">
      <span v-if="order_detail.status===1"><i class="iconfont unpay">&#xe6b0;</i>待付款</span>
      <span v-if="order_detail.status===2"><i class="iconfont">&#xe624;</i>已付款</span>
      <span v-if="order_detail.status===4"><i class="iconfont">&#xe624;</i>交易完成</span>
      <span v-if="order_detail.status===5">交易关闭</span>
    </div>
    <div class="product-item clearfix" v-for="detail in order_detail.details" :key="detail.id">
      <img class="product-img" :src="detail.imgUrl">
      <div class="product-name">
        <p>{{detail.goodsName}}</p>
        <p class="goodsRang">
          <span v-for="(item, index) in detail.goodsRange" :key="index">{{item}}</span>
        </p>
        <span>买家：{{order_detail.buyerName}}</span>
      </div>
      <div class="product-number">
        <span> +{{detail.unitPrice/100}}</span><span> x{{detail.quantity}}</span>
      </div>
    </div>
    <div class="product-info clearfix">
      <div class="fl">
        <p v-if="order_detail.orderNumber">订单编号：<span>{{order_detail.orderNumber}}</span></p>
        <p v-if="order_detail.transactionNumber">支付编号：<span>{{order_detail.transactionNumber}}</span></p>
        <p v-if="order_detail.createDateStr">创建时间：<span>{{order_detail.createDateStr}}</span></p>
        <p v-if="order_detail.tradeTimeStr">付款时间：<span>{{order_detail.tradeTimeStr}}</span></p>
      </div>
      <div class="product-money">
        <p><label class="ac-pay">实付款：</label><span class="total-money"><em>￥</em>{{order_detail.total/100}}</span></p>
        <p class="services" v-if="order_detail.preferentialPrice || order_detail.couponPrice">{{order_detail.couponPrice ? '优惠券' : '优惠活动'}}：<span>-￥{{order_detail.couponPrice ? order_detail.couponPrice/100 : order_detail.preferentialPrice/100}}</span></p>
      </div>
    </div>
    <div class="receiver-info">
      <p v-if="order_detail.receiptUserName">收货人：<span>{{order_detail.receiptUserName}}</span></p>
      <p v-if="order_detail.address">收货地址：<span>{{order_detail.address}}</span></p>
      <p v-if="order_detail.phone">收货人电话：<span>{{order_detail.phone}}</span></p>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters({
        order_detail: 'order_detail'
      })
    },
    created () {
      this.$store.commit('LAYOUT_GRID', false)
      this.$store.dispatch('order_detail', {orderId: this.$route.params.id})
    },
    destroyed () {
      this.$store.commit('LAYOUT_GRID', true)
    }
  }
</script>

<style scoped lang="scss">
h1 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #333;
}

.order-state {
  height: 75px;
  line-height: 75px;
  padding-left: 44px;
  &.success {
    background: #d3ebeb;
    color: #0ea87c;
  }
  span {
    line-height: 75px;
    font-size: 18px;
  }
}

.order-state span, .order-state i {
  display: inline-block;
  float: left;
}

.iconfont {
  font-size: 33px;
  margin-right: 22px;
  color: #00bb90
}

.unpay {
  color: #fc6f00
}

.product-item {
  padding: 30px 60px 20px 0;
  border-bottom: 1px solid #f0f0f0;
  .product-name {
    padding-top: 4px;
    p {
      font-size: 16px;
      color: #333;
      margin-bottom: 10px;
      &.goodsRang {
        font-size: 14px;
        &>span {
          color: #333;
          padding-right:3px;
        }
      }
    }
    span {
      color: #999;
    }
  }
}

.product-img {
    width: 70px;
    height: 70px;
    margin-right: 20px;
}

.product-img, .product-item .product-name {
    float: left;
}

.product-number {
    float: right;
    span {
        font-size: 16px;
        color: #666;
        margin-right: 10px;
    }
}

.product-info {
    padding: 20px 60px 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

.receiver-info {
    padding: 20px 0;
}

.product-info p, .receiver-info p {
    color: #333;
    font-size: 14px;
    line-height: 30px;
}

.product-money {
    float: right;
    .total-money {
        font-size: 24px;
        color: #fc6f00;
        em {
            font-style: normal;
            font-size: 20px;
        }
    }
}

.ac-pay {
    font-size: 18px;
    color: #333;
    margin-right: 10px !important;
}
p.services {
  padding-left: 10px;
  font-weight: 600;
  font-size: 15px;
}
</style>
